<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/heard.css"/>
    <link rel="stylesheet" type="text/css" href="../css/login.css"/>
    <link rel="stylesheet" type="text/css" href="../css/vm.extend.css"/>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jq.min.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
</head>


<body style="background: white;">
<!--内容区-->
<div class="laxin_new_x">
    <div style="float: right;padding: 2px;border: 1px silver solid;margin-right: 5px;border-radius: 2px;"
         onclick="go_zhuce()">
        <span>注册</span>
    </div>
    <img src="../image/logo.png"/>
    <aside class="vm-flex-y">
        <img src="../image/user.png"/>
        <input type="text" id="usrname" value="" placeholder="请输入用户名"/>
    </aside>
    <aside class="vm-flex-y">
        <img src="../image/pass.png"/>
        <input type="password" id="password" value="" placeholder="请输入密码"/>
    </aside>
    <button onclick="login()">登录</button>
</div>

</body>
<script type="text/javascript">
    var deviceId = "";
    apiready = function () {
        deviceId = api.deviceId;//设备编码
    };

    function go_zhuce() {
        var headerH = 0;
        var footerH = 60;
        var frameH = api.winHeight - headerH - footerH;
        api.openFrame({
            name: 'zhuce',
            url: '../html/zhuce.html',
            bounces: false,  //上下滑动
            scrollEnabled: true,
            pageParam: {
                usrname: usrname,
                password: password
            },
            rect: {
                x: 0,
                y: headerH,
                w: 'auto',
                h: frameH
            }
        });
    }

    //登录
    function login() {
        var usrname = $("#usrname").val();
        if (!usrname) {
            api.toast({
                msg: '用户名不能为空',
                duration: 2000,
                location: 'bottom'
            });
            return;
        }
        var password = $("#password").val();
        if (!password) {
            api.toast({
                msg: '密码不能为空',
                duration: 2000,
                location: 'bottom'
            });
            return;
        }
        api.showProgress({});
        $.ajax({
            type: "POST",
            url: "http://www.solearn.top/paotui/public/index.php/index/index/login",
            dataType: "json",
            data: {usrname: usrname, password: password, deviceId: deviceId},
            success: function (res) {
                api.hideProgress();//关闭加载动画
                if (res.status == 1) {
                    //要减掉头部与尾部，默认加载主页
                    var headerH = 0;
                    var footerH = 60;
                    var frameH = api.winHeight - headerH - footerH;
                    api.openFrame({
                        name: 'main',
                        url: '../html/main.html',
                        bounces: true,  //上下滑动
                        scrollEnabled: true,
                        pageParam: {
                            usrname: usrname,
                            password: password
                        },
                        rect: {
                            x: 0,
                            y: headerH,
                            w: 'auto',
                            h: frameH
                        }
                    });
                } else {
                    api.toast({
                        msg: '用户名或密码错误',
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            }
        });


    }

</script>
</html>
